<template>
  <div class="pickers">
      <van-button type="default" icon="arrow-down" round block size="small" plain :text="type !== '' ? type : '请选择'" @click="show=true"></van-button>
      <van-popup v-model="show" position="bottom" :overlay="true" closeable round
          :style="{ height: '50%' }">
          <van-picker show-toolbar title="请选择" :columns="types" :default-index="0"
             @confirm="show=false" @cancel="show = false" @change="onChange" ref="picker"/>
      </van-popup>
  </div>
</template>

<script>
import { getDicts } from "@/api/common";
export default {
  props:['objectName','fieldName'],
  data() {
    return {
      types: [],
      type: '',
      show: false,
    };
  },
  mounted() {
    this.getTypes();
  },
  methods: {
    onChange(picker, value, index) {
        this.show = false;
        this.type = value.text;
        this.$store.dispatch('common/changeAreaValue',value.id)
    },
    // 调用api获得酒店类型列表
    getTypes() {
      getDicts(this.objectName,this.fieldName,
          data => {
            for(var d in data){
                this.types.push({text:data[d].text,id:data[d].id,selected:false});
            }
          },
          err => {
              console.log(err);
          });
    },
  },
};
</script>

<style scoped>
.pickers {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.van-button__text {
  max-width: 10em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-button {
    margin-left: 5px;
}
</style>
